<template>
	<div>

		<div class="action-bar">
			<el-tabs class="status-bar" v-model="status" @tab-click="findWarningGoodsList">
				<el-tab-pane label="正常" name="0"></el-tab-pane>
				<el-tab-pane label="已下架" name="1"></el-tab-pane>
			</el-tabs>
			<div>
				<el-input size="small" v-model="keyword" placeholder="请输入商品名称" maxlength="10" @keyup.enter.native="findWarningGoodsList" style="width: 300px;">
					<el-button slot="append" icon="el-icon-search" @click="findWarningGoodsList"></el-button>
				</el-input>
			</div>
		</div>

		<el-table :data="goodsList" v-loading="loading">
			<el-table-column label="商品" width="400">
				<template slot-scope="scope">
					<div class="goods-wrap">
						<el-image class="thumb" :src="scope.row.thumbUrl" fit="cover"></el-image>
						<span class="name elip">{{scope.row.name}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="当前库存" prop="stock" align="center"></el-table-column>
			<el-table-column label="预警库存" prop="warningStock" align="center"></el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.status == 0">正常</el-tag>
					<el-tag type="danger" v-if="scope.row.status == 1">下架</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="small" icon="el-icon-edit-outline" @click="goDetailPage(scope.row.id)">编辑商品</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-wrap" v-show="totalSize > 10">
			<el-pagination background layout="prev, pager, next" :total="totalSize" :current-page="pageNumber" @current-change="pageChange"></el-pagination>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				loading: false,
				status: '0',
				keyword: '',
				pageNumber: 1,
				totalSize: 0
			}
		},
		created() {
			this.findWarningGoodsList();
		},
		methods: {
			findWarningGoodsList(isSwitchPage = false) {
				if (!isSwitchPage) this.pageNumber = 1;

				this.loading = true;
				this.$util.request('/statistic/warningGoodsList', {
					status: this.status,
					keyword: this.keyword,
					pageNumber: this.pageNumber
				}, (res) => {
					this.loading = false;

					this.goodsList = res.list.map(e => {
						if (e.skuType == 1) e.name += ' ' + e.skuName;
						return e;
					});
					this.totalSize = res.totalRow;
				}, true);
			},
			pageChange(e) {
				this.pageNumber = e;
				this.findWarningGoodsList(true);
			},
			goDetailPage(id) {
				const newWindow = window.open(`/goods/detail?id=${id}`);
				const timer = setInterval(() => {
					if (newWindow.closed) {
						clearInterval(timer);
						this.findWarningGoodsList(true);
					}
				}, 1000);
			}
		}
	}
</script>

<style lang="scss">
	.action-bar {
		@extend %flex-align-center;

		.status-bar {
			margin-right: 20px;
			flex: 1;
		}
	}
	
	.goods-wrap {
		@extend %flex-align-center;

		.thumb {
			width: 60px;
			height: 60px;
		}

		.name {
			color: #666;
			margin-left: 10px;
		}
	}
</style>
